<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <section class="content">
        <div class="bgColor1">
            <div class="img1"></div>
            <p class="text1">Black</p>
        </div>
        <div class="bgColor2">
            <div class="img2"></div>
            <p class="text2">White</p>
        </div>
        <div class="bgColor3">
            <div class="img3"></div>
            <p class="text3">Red</p>
        </div>
    </section>
    <!-- <section class="content">
        <div class="red">red</div>
    </section> -->
</body>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    body {
        padding-bottom: 3000px;
    }

    ::-webkit-scrollbar {
        width: 10px;
        background: #0D0D0E;
    }

    ::-webkit-scrollbar-thumb {
        border-radius: 5px;
        background-color: #fff;
    }

    ::selection {
        background-color: #fff;
        color: #0D0D0E;
    }

    .content {
        height: 300vh;
    }

    .bgColor1,
    .bgColor2,
    .bgColor3 {
        position: fixed;
        width: 100%;
        height: 100vh;
        background-color: #0D0D0E;
        display: flex;
    }

    .bgColor2 {
        width: 100%;
        height: 0vh;
        background-color: #fff;
    }

    .bgColor3 {
        width: 100%;
        height: 0vh;
        background-color: #DD2C46;
    }

    .img1,
    .img2,
    .img3 {
        width: 492px;
        height: 100%;
    }

    .img1 {
        background: url(finishes_black__b06syayq94wi_large.png) no-repeat;
    }

    .img2 {
        background: url(finishes_white__drv9fwq9vzwy_large.png) no-repeat;
    }

    .img3 {
        background: url(finishes_red__eqfv1ongy282_large.png) no-repeat;
    }

    .text1 {
        font-size: 70px;
        color: #fff;
        margin-top: 400px;
        margin-left: 300px;
    }

    .text2 {
        font-size: 70px;
        color: #0D0D0E;
        margin-top: 400px;
        margin-left: 800px;
    }

    .text3 {
        font-size: 70px;
        color: #E57571;
        margin-top: 400px;
        margin-left: 100px;
        opacity: 0;
    }
</style>
<script src="less.js"></script>
<!-- 流程  第一张图高度100,第二张图高度慢慢增大至100，第三张图等第二张100后高度慢慢增大 -->
<script>
    // 获取100vh
    const offset = offsetHeight('.bgColor1')
    window.onscroll = () => {
        // 获取滚动距离/100vh 的数字  为1代表滚动了1vh，为2代表滚动了2vh，以此类推
        const num = getScrollNum(offset)
        console.log(num)
        positonWorkOut(num >= 2, '.bgColor1', '.bgColor2', '.bgColor3')

        heightWorkOut(['.bgColor2', '.img2'], num * 100, num == 0, num <= 1)
        heightWorkOut(['.bgColor3', '.img3'], num * 100 - 100, num <= 1, num > 1 && num <= 2)
        if (num < 1) {
            opacity0('.text2', '.text3')
            translateX(num * 100, '.img1', '.img2')
            scrollColor(2, 3, '#fff', '#0D0D0E')
            if (num > 0.5) {
                opacity1('.text2')
                scrollColor(2, 3, '#0D0D0E', '#fff')
            }
        } else if (num <= 2) {
            scrollColor(2, 3, '#0D0D0E', '#fff')
            translateX(num * 100, '.img2', '.img3')
            opacity0('.text3')
            if (num > 1.6) {
                opacity1('.text3')
                scrollColor(2, 3, '#E57571', '#DD2C46')
            }
        }
    }
</script>

</html>